import dayjs, {Dayjs} from 'dayjs'
import {PropType} from 'vue'
import {CnNormalSpan} from '../text'

export type SimpleDateTabActiveKey = '1' | '2' | '3'

export const SimpleDateTab = defineComponent({
  props: {
    activeKey: String as PropType<SimpleDateTabActiveKey>,
    textColor: String as PropType<'black' | 'white'>
  },
  emits: {
    change: (activeKey: SimpleDateTabActiveKey, date: [Dayjs, Dayjs]): boolean => true,
    'update:activeKey': (activeKey: SimpleDateTabActiveKey): boolean => true
  },
  setup(props, {emit}) {
    const activeKey = ref<SimpleDateTabActiveKey>('1')

    watch(
      () => activeKey.value,
      n => {
        let date: [Dayjs, Dayjs] = [dayjs(), dayjs()]
        switch (n) {
          case '1':
            date = [dayjs(), dayjs()]
            break
          case '2':
            date = [dayjs().subtract(1, 'week'), dayjs()]
            break
          case '3':
            date = [dayjs().subtract(1, 'month'), dayjs()]
            break
          default:
            date = [dayjs(), dayjs()]
            break
        }
        emit('change', n, date)
        emit('update:activeKey', n)
      }
    )

    watch(
      () => props.activeKey,
      n => {
        if (n !== undefined) {
          activeKey.value = n
        }
      },
      {immediate: true}
    )

    return () => (
      <a-tabs class='custom-ant-tabs h-full mr-32 pb-6' v-model={[activeKey.value, 'activeKey']}>
        <a-tab-pane
          key='1'
          tab={() => (
            <CnNormalSpan
              class={[
                ' ',
                activeKey.value === '1'
                  ? props.textColor === 'black'
                    ? 'text-xText'
                    : 'text-white'
                  : ''
              ]}
            >
              日
            </CnNormalSpan>
          )}
        ></a-tab-pane>
        <a-tab-pane
          key='2'
          tab={() => (
            <CnNormalSpan
              class={[
                ' ',
                activeKey.value === '2'
                  ? props.textColor === 'black'
                    ? 'text-xText'
                    : 'text-white'
                  : ''
              ]}
            >
              周
            </CnNormalSpan>
          )}
        ></a-tab-pane>
        <a-tab-pane
          key='3'
          tab={() => (
            <CnNormalSpan
              class={[
                ' ',
                activeKey.value === '3'
                  ? props.textColor === 'black'
                    ? 'text-xText'
                    : 'text-white'
                  : ''
              ]}
            >
              月
            </CnNormalSpan>
          )}
        ></a-tab-pane>
      </a-tabs>
    )
  }
})

export const DateTimeRange = defineComponent({
  props: {
    dateTimes: Array as unknown as PropType<[Dayjs, Dayjs]>,
    activeKey: String as PropType<SimpleDateTabActiveKey>,
    dateTabTextColor: String as PropType<'black' | 'white'>
  },
  emits: {
    'update:dateTimes': (dateTimes: [Dayjs, Dayjs]): boolean => true,
    'update:activeKey': (activeKey: SimpleDateTabActiveKey): boolean => true
  },
  setup(props, {emit}) {
    const date = ref([dayjs(), dayjs()])

    watch(
      () => date.value,
      n => {
        emit('update:dateTimes', [n[0], n[1]])
      },
      {immediate: true}
    )

    return () => (
      <div class='h-full flex items-center'>
        <a-range-picker
          v-model={[date.value, 'value']}
          class='mr-32 h-full'
          allowClear={false}
        ></a-range-picker>

        <SimpleDateTab
          activeKey={props.activeKey}
          onChange={(key, dateTimes) => {
            date.value = dateTimes
            emit('update:activeKey', key)
          }}
          textColor={props.dateTabTextColor}
        ></SimpleDateTab>
      </div>
    )
  }
})
